﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>客户端分段专题图</title>
        <script src="./static/libs/include-mapboxgl-local.js"></script>
        <style>
            body {
                height: 700px;
            }

            .legendItemHeader,
            .legendItemValue {
                width: 200px;
                height: 18px;
                font-size: 14px;
            }

            .panel-primary {
                border-color: #337ab7;
            }

            .panel {
                margin-bottom: 20px;
                background-color: #fff;
                border: 1px solid transparent;
                border-radius: 4px;
                -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
            }

            .panel-title {
                margin-top: 0;
                margin-bottom: 0;
                font-size: 16px;
                color: inherit;
            }

            .text-center {
                text-align: center;
            }

            .panel-heading {
                padding: 5px 15px;
                border-bottom: 1px solid transparent;
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                background-color: #337ab7;
                border-color: #337ab7;
            }

            .panel-body {
                padding: 15px;
            }
        </style>
        <script type="text/javascript">
            //使用严格模式
            'use strict';
            //定义地图文档图层和地图、专题图图层
            var mapDocLayer, map, themeLayer;
            var { protocol, ip, port } = window.webclient;
            var ip = `${ip}`;
            var port = `${port}`;
            var docName = 'Hubei4326';
            var legendView, infoView;

            /** 初始化地图显示*/
            function init() {
                //地图容器
                //地图容器
                map = new mapboxgl.Map({
                    //地图容器div的id
                    crs: 'EPSG:4326',
                    container: 'map',
                    center: [112.247175, 30.152892],
                    zoom: 6,
                    //设置地图样式信息
                    style: {
                        //设置版本号，一定要设置
                        version: 8,
                        //添加来源
                        sources: {},
                        //设置加载并显示来源的图层信息
                        layers: []
                    }
                });

                function appendMapDoc() {
                    if (map != null) {
                        mapDocLayer = new mapboxgl.Zondy.Map.MapDocLayer(docName, {
                            //IP地址
                            ip: `${ip}`,
                            //端口号
                            port: `${port}`,
                            //只显示一个图层,不平铺显示
                            noWrap: true
                        });
                        mapDocLayer.addToMap(map);
                    }
                }
                map.on('load', function () {
                    appendMapDoc();
                });
            }

            /** 添加专题图*/
            function createThemeBtn() {
                startPressBar();
                themeLayer = Zondy.Map.rangeThemeLayer('ThemeLayer', {
                    map: map,
                    // 开启 hover 高亮效果
                    isHoverAble: true,
                    opacity: 0.8,
                    alwaysMapCRS: true
                });

                themeLayer.style = new Zondy.Map.ThemeStyle({
                    shadowBlur: 16,
                    shadowColor: '#000000',
                    fillColor: '#FFFFFF'
                });

                // hover 高亮样式
                themeLayer.highlightStyle = new Zondy.Map.ThemeStyle({
                    stroke: true,
                    strokeWidth: 4,
                    strokeColor: 'blue',
                    fillColor: '#00EEEE',
                    fillOpacity: 0.8
                });

                // 用于专题图的属性字段名称
                themeLayer.themeField = 'GDP2016';
                // 风格数组，设定值对应的样式
                themeLayer.styleGroups = [
                    {
                        start: 0,
                        end: 100,
                        style: {
                            color: '#0000FF'
                        }
                    },
                    {
                        start: 100,
                        end: 150,
                        style: {
                            color: '#238E23'
                        }
                    },
                    {
                        start: 150,
                        end: 200,
                        style: {
                            color: '#8E236B'
                        }
                    },
                    {
                        start: 200,
                        end: 400,
                        style: {
                            color: '#00FF7F'
                        }
                    },
                    {
                        start: 400,
                        end: 1323,
                        style: {
                            color: '#2F4F2F'
                        }
                    }
                ];

                themeLayer.on('mousemove', highLightLayer);
                addThemeFeatures(querySuccess);
            }

            /** 添加专题图要素*/
            function addThemeFeatures(onsuccess) {
                var queryStruct = new Zondy.Service.QueryFeatureStruct();
                //是否包含几何图形信息
                queryStruct.IncludeGeometry = true;
                //是否包含属性信息
                queryStruct.IncludeAttribute = true;
                //是否包含图形显示参数
                queryStruct.IncludeWebGraphic = false;
                //实例化查询参数对象
                var queryParam = new Zondy.Service.QueryParameter({
                    resultFormat: 'json',
                    struct: queryStruct,
                    where: '1>0'
                });
                //设置查询分页号
                queryParam.pageIndex = 0;
                //设置查询要素数目
                queryParam.recordNumber = 10000;
                //实例化地图文档查询服务对象
                var queryService = new Zondy.Service.QueryDocFeature(queryParam, docName, 1, {
                    ip: ip,
                    port: port,
                    requestType: 'POST'
                });

                //执行查询操作，querySuccess为查询回调函数
                queryService.query(onsuccess, null);
            }

            /** 要素查询成功回调函数*/
            function querySuccess(data) {
                if (data != null) {
                    //客户端专题图：添加数据
                    themeLayer.addFeatures(data);
                    document.getElementById('legendview').style.display = 'block';
                }
                stopPressBar();
            }

            /** 高亮设置*/
            function highLightLayer(e) {
                if (e.target && e.target.refDataID) {
                    document.getElementById('infoBox').style.display = 'block';
                    var fid = e.target.refDataID;
                    var fea = themeLayer.getFeatureById(fid);
                    if (fea) {
                        document.getElementById('infoContent').innerHTML = '';
                        document.getElementById('infoContent').innerHTML += 'FID: ' + fea.attributes.FID + '<br/>';
                        document.getElementById('infoContent').innerHTML += '行政区: ' + fea.attributes['NAME'] + '<br/>';
                        document.getElementById('infoContent').innerHTML += 'GDP_2011：' + parseInt(fea.attributes['GDP_2011']) + '<br/>';
                    }
                } else {
                    document.getElementById('infoContent').innerHTML = '';
                    document.getElementById('infoBox').style.display = 'none';
                }
            }

            /** 删除专题图*/
            function deleteTheme() {
                if (map != null && themeLayer != null) {
                    themeLayer.removeFromMap();
                }
                if (infoView) {
                    map.removeControl(infoView);
                    infoView = null;
                }
                if (legendView) {
                    map.removeControl(legendView);
                    legendView = null;
                }
            }

            /** 开始进度条动画*/
            function startPressBar() {
                document.getElementById('preview').style.display = '';
            }

            /** 停止进度条动画*/
            function stopPressBar() {
                document.getElementById('preview').style.display = 'none';
            }
        </script>
    </head>

    <body style="width: 100%; height: 100%; position: absolute" onload="init();">
        <div
            id="preview"
            style="
                display: none;
                text-align: center;
                padding-top: 250px;
                font-weight: bold;
                position: absolute;
                background: rgba(3, 3, 3, 0.1);
                color: #fff;
                float: left;
                width: 100%;
                height: 100%;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                z-index: 20000;
            "
        >
            <img src="./static/assets/graphic-image/39-1.gif" alt="" /><br />
            <br />
            <span>正在操作，请稍候</span>
        </div>
        <div class="ToolLib">
            <input type="button" class="ButtonLib" id="createThemeBtn" value="添加专题图" onclick="createThemeBtn()" />
            <input type="button" class="ButtonLib" id="deleteThemeBtn" value="删除专题图" onclick="deleteTheme()" />
        </div>
        <div id="map" style="width: 100%; height: 95%"></div>
        <div
            id="infoBox"
            class="panel panel-primary infoPane"
            style="width: 272px; right: 10px; bottom: 230px; position: absolute; fontsize: 14px; display: none"
        >
            <div class="panel-heading">
                <h5 class="panel-title text-center">属性</h5>
            </div>
            <div id="infoContent" class="panel-body content"></div>
        </div>
        <div id="legendview" class="panel panel-primary legend" style="width: 272px; right: 10px; bottom: 0px; position: absolute; display: none">
            <div class="panel-heading">
                <h5 class="panel-title text-center">图例</h5>
            </div>
            <div class="panel-body text-center">
                <table>
                    <tbody>
                        <tr>
                            <td class="legendItemHeader">GDP</td>
                            <td class="legendItemValue">颜色</td>
                        </tr>
                        <tr>
                            <td class="legendItemHeader">0 - 10000</td>
                            <td class="legendItemValue" style="background: #0000ff"></td>
                        </tr>
                        <tr>
                            <td class="legendItemHeader">10000-20000</td>
                            <td class="legendItemValue" style="background: #238e23"></td>
                        </tr>
                        <tr>
                            <td class="legendItemHeader">20000-30000</td>
                            <td class="legendItemValue" style="background: #8e236b"></td>
                        </tr>
                        <tr>
                            <td class="legendItemHeader">30000-40000</td>
                            <td class="legendItemValue" style="background: #00ff7f"></td>
                        </tr>
                        <tr>
                            <td class="legendItemHeader">40000-以上</td>
                            <td class="legendItemValue" style="background: #2f4f2f"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>
